<link rel="stylesheet" type="text/css" href="css/media-popup.css?ver=3" />
<div id="media-popup">
    <ul>
        <li><a data-href="#tab-list">Media Library</a></li>
        <li><a data-href="#tab-upload">Upload files</a></li>
    </ul>
    <div id="tab-list">
    	<div id="media-toolbar">
        	<div id="media-filter">
            	<select id="mFiletype">
                	<option value="">All</option>
                    <option value="image">Image</option>
                    <option value="video">Video</option>
                </select>
                <input type="search" placeholder="Tìm kiếm" id="mKeyword" style="float:left; margin-left:2px;">
                <a href="javascript:void(0);" id="mSearch" style="border:1px solid #cccccc; background:#cccccc; text-decoration:none; float:left; height:16px; margin-left:2px;">Search</a>
             </div>
            <ul id="media-pagination"></ul>
        </div>
        <ul id="media-list"><div  style="margin:15% auto; text-align:center; width:35px;"><img src="img/loading.gif"></div></ul>
        <div id="media-sidebar">
        	<h3>Attachment Details</h3>
            <div class="thumbnail">
                <img draggable="false" src="">
            </div>
            <div class="details">
            	<div>
                    <label for="f_url">File URL</label>
                    <input type="text" readonly id="f_url" value="">
                </div>
                <div>
                    <label for="f_title">Image Title</label>
                    <input type="text" id="f_title" value="">
                </div>
                <div>
                    <label for="f_description">Image Description</label>
                    <input type="text" id="f_description" value="">
                </div>
                <div>
                    <label for="f_description">Thumbs size</label>
                    <select id="f_thumbs">
                        <option value="source">Source (no thumbs)</option>
                        <option value="source">All sizes</option>
                        <option value="100x100">Small (100x100)</option>
                        <option value="300x300">Medium (300x300)</option>
                        <option value="1024x768">Large (1024x768)</option>
                    </select>
                </div>
                <div>
                	<label>&nbsp;</label>
                    <input type="button" id="b_insert" value="Insert">
                </div>
            </div>
        </div>
    </div>
    <div id="tab-upload">
        <form onsubmit="return false;" id="frmUpload">
        <div class="row">
            <input type="radio" onclick="selectType(1);" checked="checked" value="1" name="upload_type" class="choose required">
            <div class="browse">
                <p><b class="f_size12">Choose image from your PC</b></p>
                <p><input type="file" style="height: auto; float: none" id="media" name="media" class="required"></p>
                <p>.gif, .jpg, .jpeg, .png files only, Maximum Width : 600 px	 Maximum Height : 800 px
</p>
            </div>
        </div>
        <div class="row">
            <input type="radio" onclick="selectType(2);" value="2" name="upload_type" class="choose">
            <div class="browse">
                <p><b class="f_size12">Insert image from link (URL)</b></p>
                <p><input type="text" style="float: none; width:90%;" id="url" name="url" class="required" onFocus="this.select()"></p>
                <p>e.g: http://example.com/images/face.png</p>
            </div>
        </div>
        <div class="row"><input type="submit" class="ui_btnCb btnSmall" id="btnUploadImg" value="OK"></div>
        </form>
    </div>
</div>
<script type="text/javascript" src="../libs/jquery/validation/additional-methods.min.js"></script>
<script src="js/validate-methods.js"></script>
<script src="../libs/jquery/ajaxfileuploader/ajaxfileupload.js"></script>
<script>
$(function() {
    $("#media-popup ul").find("a").each(function() {
        this.href = location.href+$(this).attr('data-href');
    });
	$( "#media-popup" ).tabs({active : 0 });
	
	$('#media').click(function(){
		selectType(1);
	});
	$('#url').click(function(){
		selectType(2);
	});
	$("#frmUpload").validate({	
			ignore: ":disabled",		
			onfocusout: false,
			rules: {
				media: {
				  required: 'input[name="upload_type"][value="1"]:checked',
				  accept: "jpg|jpeg|png|gif|flv|mp4|ogg|ogv|avi|mpe?g|mov|wmv",
				  filesize: 104857600 /*100mb*/
				},
				url: {
				  required: 'input[name="upload_type"][value="2"]:checked',
				  url: true
				}
			},	
			messages:{
				 media: {
					 accept: 'Invalid input file'
				 },
				 url:{
					 url: 'Invalid url'
				 }
			},
			errorPlacement: function(error, element){
					error.insertAfter(element); 
			},
			submitHandler: function(form) {
				if($('input[name="upload_type"][value="1"]').is(':checked')){
					Media.uploadFile('/admincp/media/upload', 'media');
				}
				else{
					Media.download('/admincp/media/download', $('#url').val());
				}
		   }
		});
});
function selectType(type){
	if(type == 1){
		$('input[type="radio"][name="upload_type"][value="1"]').prop('checked', true);
		$('#url').val('');
	}
	if(type == 2){
		$('input[type="radio"][name="upload_type"][value="2"]').prop('checked', true);
		$('#media').val('');
	}
	$("label.error").hide();
  	$(".error").removeClass("error");
}
</script>